<template>
    <div class="background">
        <div class="warn">
            <div class="warn-title">
                <a>
                  <b></b>
                  <b></b>
                  <b></b>
                  <b></b>
                  警告！警告！专注力下滑！
                </a>
                <img @click="close" src="../static/icons/close.png" />
            </div>
            <div class="warn-main">
              <div class = "welcome">
                <div v-if="blink">
                  <s >当你凝视深渊，深渊也在凝视你</s>
                </div>
                <div v-else>
                  <p >当你凝视深渊，深渊也在凝视你</p>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import Speech from 'speak-tts'
export default {
  name: 'Warn',
  data () {
    return {
      username: '',
      password: '',
      blink: false,
    }
  },
  mounted(){
    setInterval(()=>{
      this.blink = !this.blink
    },200)
    const speech = new Speech() // will throw an exception if not browser supported
    if(speech.hasBrowserSupport()) { // returns a boolean
        console.log("speech synthesis supported")
    }
    speech.init({
        'volume': 1,
            'lang': 'en-GB',
            'rate': 1,
            'pitch': 8,
            'voice': 'Google UK English Male',
            'splitSentences': true,
            'listeners': {
                'onvoiceschanged': (voices) => {
                    console.log("Event voiceschanged", voices)
                }
            }
    })
    speech.speak({
        text: '警告,警告,warning!warning!warning!',
    }).then(() => {
        console.log("Success !")
    }).catch(e => {
        console.error("An error occurred :", e)
    })
  },
  methods: {
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.welcome {
  height: 130px;
  color: rgba(5, 8, 8, 0);
  text-align: center;
  position: relative;
  z-index: 9;
  font-size: 60px;
}
.background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.5);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.warn {
  width: 600px;
  height: fit-content;
}

.warn-title {
  width: 100%;
  background: rgb(0,250,154,0.6);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px;
  box-sizing: border-box;
}

.warn-title span {
  font-size: 30px;
  color: #FFFFFF;
  font-weight: 700;
}

.warn-title img {
  height: 38px;
  width: 38px;
  cursor: pointer;
}

.warn-main {
  width: 100%;
  height: 130px;
  background: rgba(5, 8, 8, 0.1);
  display: center;
  flex-direction: column;
  padding: 35px 35px 25px 35px;
  box-sizing: border-box;
}

.warn-main input {
  width: 100%;
  height: 32px;
  border: none;
  box-shadow: none;
  outline: none;
  font-size: 18px;
}

.warn-main input::-webkit-input-placeholder{
  color: #C1CACE;
}

.warn-main span {
  width: 100%;
  color: #97a5aa;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 25px;
  text-align: left;
}

.warn-title a {
  position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #f1f4f4;
    font-size: 26px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 5px;
    margin-right: 35px;
    letter-spacing: 4px;
  }
  .warn-title a:hover {
    background: #03e9f4;
    color: #f6f7f7;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 100px #03e9f4;
  }
  
  .warn-title a b {
    position: absolute;
    display: block;
  }
  
  .warn-title a b:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #03e9f4);
    animation: btn-anim1 1s linear infinite;
  }
  
  @keyframes btn-anim1 {
    0% {
      left: -100%;
    }
    50%, 100% {
      left: 100%;
    }
  }
  
  .warn-title a b:nth-child(2) {
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #03e9f4);
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
  }
  
  @keyframes btn-anim2 {
    0% {
      top: -100%;
    }
    50%, 100% {
      top: 100%;
    }
  }
  
  .warn-title a b:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(270deg, transparent, #03e9f4);
    animation: btn-anim3 1s linear infinite;
    animation-delay: .5s
  }
  
  @keyframes btn-anim3 {
    0% {
      right: -100%;
    }
    50%, 100% {
      right: 100%;
    }
  }
  
  .warn-title a b:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #03e9f4);
    animation: btn-anim4 1s linear infinite;
    animation-delay: .75s
  }
  
  @keyframes btn-anim4 {
    0% {
      bottom: -100%;
    }
    50%, 100% {
      bottom: 100%;
    }
  }
        
  .warn-main .welcome s {
  position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #f5f8f5;
    font-size: 26px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 5px;
    margin-right: 35px;
    letter-spacing: 4px;
    background: #03e9f4;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 100px #03e9f4;
  }
  
  .warn-main .welcome p {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #f5f8f5;
    font-size: 26px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 5px;
    margin-right: 35px;
    letter-spacing: 4px;
    background: #f40303;
    border-radius: 5px;
    box-shadow: 0 0 5px #f40303,
    0 0 25px #f40303,
    0 0 50px #f40303,
    0 0 100px #f40303;
  }




</style>
